{% extends 'base_dashboard.html' %}

{% block title %}Contact Inquiries — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
  <div>
    <h4 class="fw-bold mb-1">Contact inquiries</h4>
    <p class="text-muted small mb-0">Messages from the Help Center / Contact Us form</p>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card border-0 shadow-sm rounded-3 p-3">
      <div class="text-muted small">Total</div>
      <div class="fs-4 fw-bold">{{ total_count }}</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-0 shadow-sm rounded-3 p-3">
      <div class="text-muted small">Open</div>
      <div class="fs-4 fw-bold text-warning">{{ open_count }}</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-0 shadow-sm rounded-3 p-3">
      <div class="text-muted small">Resolved</div>
      <div class="fs-4 fw-bold text-success">{{ resolved_count }}</div>
    </div>
  </div>
</div>

<div class="d-flex flex-wrap gap-2 mb-3">
  <a href="{% url 'support:contact_inquiries' %}" class="btn btn-sm {% if not status_filter %}btn-primary{% else %}btn-outline-secondary{% endif %}">All</a>
  <a href="?status=open" class="btn btn-sm {% if status_filter == 'open' %}btn-primary{% else %}btn-outline-secondary{% endif %}">Open</a>
  <a href="?status=resolved" class="btn btn-sm {% if status_filter == 'resolved' %}btn-primary{% else %}btn-outline-secondary{% endif %}">Resolved</a>
</div>

<div class="card border-0 shadow-sm rounded-4">
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>Ref</th>
          <th>Subject</th>
          <th>Topic</th>
          <th>From</th>
          <th>Status</th>
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for inquiry in inquiries %}
        <tr>
          <td class="small text-muted">{{ inquiry.reference }}</td>
          <td class="fw-semibold">{{ inquiry.subject }}</td>
          <td><span class="badge bg-light text-dark border">{{ inquiry.get_topic_display }}</span></td>
          <td>
            <div class="small fw-semibold">{{ inquiry.name }}</div>
            <div class="small text-muted">{{ inquiry.email }}</div>
          </td>
          <td>
            {% if inquiry.is_resolved %}
              <span class="badge bg-success-subtle text-success">Resolved</span>
            {% else %}
              <span class="badge bg-warning-subtle text-warning">Open</span>
            {% endif %}
          </td>
          <td class="small text-muted">{{ inquiry.created_at|date:"d M Y H:i" }}</td>
          <td>
            <a href="{% url 'support:contact_inquiry_detail' inquiry.pk %}" class="btn btn-sm btn-outline-primary">View</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted py-5">No inquiries yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}